<!DOCTYPE html>
<html lang="ca">
    <head>
        <link rel="stylesheet" href="{ROOT_FRAMEWORK}/site_media/css/usuari/usuari_edit_estilos.css">
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/js/usuari_edit.js" language="javascript"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/js/crearCSV.js" language="javascript"></script>
        <link rel="stylesheet" href="{ROOT_FRAMEWORK}/site_media/css/calendari/calendari_estilos.css"></link>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/js/calendari_functions.js"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/js/date.js"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/js/div_evento.js"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery-1.8.3.js"></script>  
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery-ui-1.9.2.custom.min.js"></script>    
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery.ui.datepicker-es.js"></script>    
        <link href="{ROOT_FRAMEWORK}/site_media/css/calendari/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet"></link>
        <link href="{ROOT_FRAMEWORK}/site_media/css/calendari/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"></link>  
        <script type="text/javascript" src="{ROOT_FRAMEWORK}/site_media/jquery/jquery-ui-timepicker-addon.js"></script>
        <link rel="stylesheet" href="{ROOT_FRAMEWORK}/site_media/css/calendari/jquery-ui-timepicker-addon.css"></link>
        <link rel="stylesheet" href="{ROOT_FRAMEWORK}/site_media/css/calendari/jquery-ui.css"></link>  
        <script type="text/javascript">
            //variable per saber el mes actual
            function iniMes(){
                 variableGlobalMesActual = 0;
            }
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#Data").datepicker({
                    showOn: "both",
                    buttonImageOnly: true,
                    buttonImage: "{ROOT_FRAMEWORK}/site_media/img/calendar.png",
                    dateFormat: "dd-mm-yy"
                });
            });
            function creaPicker(){  
                $(document).ready(function() {
                    $("#horaInici").timepicker();
                    $("#horaFi").timepicker(); 
                });
            }
        </script>
        <title>Calendari - {NOM_USUARI}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
<body>

<!-- Contenidor -->
<div id="contenedor">
    <!-- Capçalera -->
    <header id="cabecera"  style="">
        <!-- Creació d'un firxer CSV -->
        <header id="logo">
            <form  action="{ROOT_FRAMEWORK}/index.php?usuari&action=EDIT_USUARI"  method="post" style="width: 100%;text-align: right">
                Exporta el teu calendari  <input onClick="creaCSVCalendar('{MAIL_USUARI}')"  type="submit" id="creaCSV" name="creaCSV" value=""/>
            </form>
            <form  action="{ROOT_FRAMEWORK}/index.php?usuari&action=EDIT_USUARI"  method="post" onsubmit="return false" style="width: 100%;text-align: right">
                Importa el teu Google Calendar
                <input onClick="importaCSVCalendar('{MAIL_USUARI}')"  type="submit" onsubmit="return false" id="importaCSV" name="importaCSV" value=""/>  
            </form>
        </header>
        <!-- Fi creació d'un firxer CSV -->
        <header id="calendario">
            <div style="margin: 0; padding: 0;">
                <div style="float: left; padding-top: 15px;">Torna al teu calendari</div>
                <div style="float: left;"><a href="{ROOT_FRAMEWORK}/index.php"><img src="{ROOT_FRAMEWORK}/site_media/img/calendario.png" style="height: 40px;width: 40px;"></a></div>
            </div>
        </header>
    </header>
    <!-- /Capçalera -->

    <!-- Menu principal -->
    <nav id="menu">
        <div class="clear"></div>
    </nav>

    <!-- Lateral -->
    <aside id="lateral">
            <!-- eventos -->
            <div id="eventos"  style="
                overflow: auto;
                background-image: url('http://localhost/projecte-sintesi-dani-victor/site_media/img/bg_login_usuari.jpg');
                background-size: 100% 100%;  
                height: 300px;
                width: 180px;
                padding-top: 1em;
                font-family: monospace;
                font-weight: bold; 
            ">
            {EVENTOS_USUARIO}
            </div>
            <!-- /eventos -->
    </aside>
    <!-- /Lateral -->
	
    <!-- Contingut -->
    <div id="contenido">
        <!-- Principal -->
        <section id="principal">
            <form action="{ROOT_FRAMEWORK}/index.php?usuari&action=EDIT_USUARI_ACTION" name="miform" method="post" id="miform" onsubmit="return comprovaTot()">
                <table>
                    <tr>
                        <td colspan="2"><b><label id="labelE-mail" for="E-mail">E-mail:</label></b><input class="inputs" name="E-mail" type="text" id="E-mail" tabindex="4" value="{MAIL_USUARI}" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <td  colspan="2"><b><label id="labelNom" for="Nom">Nom:</label></b><input class="inputs" type="text" id="Nom" name="Nom" tabindex="1" value="{NOM_USUARI}" /></td>
                    </tr>
                    <tr>
                        <td  colspan="2"><b><label id="labelPrimerCognom" for="Nom" >Primer cognom:</label></b><input class="inputs"  type="text" id="PrimerCognom" name="PrimerCognom" tabindex="2" value="{PRIMER_COGNOM_USUARI}" /></td>
                    <tr>
                        <td  colspan="2"><b><label id="labelSegonCognom" for="SegonCognom" >Segon cognom:</label><input class="inputs" type="text" id="SegonCognom" name="SegonCognom" tabindex="3" value="{SEGON_COGNOM__USUARI}" /></td>
                    </tr>
                    <tr>
                        <td  colspan="2"><b><label id="labelPassword" for="Password">Password:</label><input class="inputs" name="Password" type="password" id="Password" tabindex="5" value="{PASSWORD_USUARI}" readonly /></td><td><img src="{ROOT_FRAMEWORK}/site_media/img/change_password.jpg" height="40" width="40" onmousedown="canviaPassword()"></td>
                    </tr>
                     
                    <tr>
                        <td  colspan="2"><b><label id="labelDataNaixament" for="DataNaixament">Data Naixament (DD-MM-AAAA):</label><input class="inputs"  type="text" name="DataNaixament" id="DataNaixament" tabindex="7" value="{DATA_NAIXAMENT_USUARI}"/></td>
                    </tr>
                    <tr>
                        <td rowspan="2"  colspan="2"><center><input type="submit" name="Submit" value="Modifica les teves dades personals"></td>
                    </tr>
                </table>
            </form>    
            <label id="mostraGif" style="display: none" ><img src="{ROOT_FRAMEWORK}/site_media/img/ajax-loader.gif"></label>
        </section>
        <!-- /Principal -->
        <div id="foto">
            <iframe src="{ROOT_FRAMEWORK}/site_media/Fotos/index.php?foto={IMATGE_PERFIL}&mail={MAIL_USUARI}&ruta={ROOT_FRAMEWORK}"  ></iframe>
        </div>
    </div>
    <!-- /Contingut -->
    <div class="clear"></div>
    <!-- Pie -->
    <footer id="pie">		
        <span class="copyright">
            &copy; Copyright Víctor F. O. and Daniel T. T.
        </span>
        <div class="clear"></div>
    </footer>
    <!-- /Pie -->
</div>
<!-- /Contenidor -->

</body>
</html>